<template>
  <!-- 定位元素 -->
  <div class="my-picker">
    <!-- vue-popper组件 -->
    <Popper ref="popper" v-model="showPopper">
    </Popper>
    <el-button @click="click">click</el-button>
    <el-button @click="click">click</el-button>
    <el-button @click="click">click</el-button>
    <el-button @click="click">click</el-button>
    <el-button @click="click">click</el-button>
    <el-button @click="click">click</el-button>
    <!-- 弹出组件 -->
    <div ref="fly-piece" v-show="showPopper" class="my-picker__popper">你看，我弹出来了</div>
  </div>
</template>

<script>
// 引入vue-popper组件
import Popper from 'element-ui/src/utils/vue-popper';

Popper.render = (h) => h(null);

/**
 * 可移动弹出层
 *
 * 每次弹出的气泡窗，都吸附在触发点击的 dom 元素附近
 */
export default {
    components: {
        Popper
    },
    data() {
        return {
            // 双向绑定，控制弹出层是否弹出
            showPopper: false
        }
    },
    methods: {
        click: function (evt) {
            // 切换吸附 dom 元素
            this.$refs.popper.referenceElm = evt.target;
            this.$refs.popper.createPopper();
            this.showPopper = !this.showPopper;
            console.log(this.showPopper);
        }
    },
    mounted() {
        // 弹出层
        this.$refs.popper.popperElm = this.$refs['fly-piece'];
        // 定位层
        this.$refs.popper.referenceElm = this.$el;
    }
}
</script>